﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>忘记密码</title>
    <link rel="stylesheet" href="css/table.css">
    <link rel="stylesheet" href="css/mulu.css">
    <link rel="stylesheet" href="css/element.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="css/jquery.min.js"></script>
    <script src="css/vue.js"></script>
    <script src="css/element.js"></script>
    <script src="js/0_common/jquery.min.js"></script>
    <script src="js/constants.js"></script>
</head>
<style>
    .input-val {
        width: 30%;
        height: 40px;
        box-sizing: border-box;
        line-height: 1.42857143;
        color: #555;
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
        border-radius: 4px;
        margin-top: 1%;
        display: inline-block;
    }
    #canvas {
        vertical-align: middle;
        box-sizing: border-box;
        border: 1px solid #ccc;
        border-radius: 4px;
        cursor: pointer;
        margin-top: -5px;
    }
    #back{
        width: 41%;
        height: 35px;
        background-color: #bcc6d3;
        text-align: center;
        line-height: 35px;
        color:white;
    }
    #save{
        width: 41%;
        height: 35px;
        background-color: #64c1d3;
        text-align: center;
        line-height: 35px;
        color:white;
        margin-left: 5%;
    }
</style>
<body>


<div id="mainbox">
    <div id="but">
        <span style="font-size: 20px;font-weight: 600">忘记密码</span>
    </div>
    <div id="lin"></div>
    <div id="content">
        <div class="hangz">
            <span class="hangtitle">企业名称</span><br>
            <input id="name" class="hanginputz form-control" style="width: 104%!important;"/>
        </div>
        <div class="hang">
            <span class="hangtitle">是否属于楼宇、产业园</span><br>
            <select id="sflouyu"  class="hanginput form-control"  onchange="controlLouyu(this.value)">
                <option value="1">是</option>
                <option value="0">否</option>


            </select>
        </div>
        <div class="hang">
            <span class="hangtitle" id="ly1">所属楼宇、产业园</span><br>
            <select id="louyu"  class="hanginput form-control selectpicker" placeholder="请选择所属楼宇或者产业园"
                    data-live-search="true" onchange="show(this.value)" >
                <option value="">请选择</option>
            </select>
        </div>
        <div class="hang">
            <span class="hangtitle">所在街道</span><br>
            <select id="street" class="hanginput form-control">
                <option value="">请选择</option>
                <option value ="平江街道">平江街道</option>
                <option value ="金阊街道">金阊街道</option>
                <option value="白洋湾街道">白洋湾街道</option>
                <option value="沧浪街道">沧浪街道</option>
                <option value ="双塔街道">双塔街道</option>
                <option value ="虎丘街道">虎丘街道</option>
                <option value="苏锦街道">苏锦街道</option>
                <option value="吴门桥街道">吴门桥街道</option>
<!--                <option value="平江新城">平江新城</option>-->
<!--                <option value="沧浪新城">沧浪新城</option>-->
<!--                <option value="金阊新城">金阊新城</option>-->
            </select>
        </div>
        <!--        <div class="hang">-->
        <!--            <span class="hangtitle">所在社区</span><br>-->
        <!--            <input id="ssshequ" class="hanginput form-control"/>-->
        <!--        </div>-->


        <div class="hang">
            <span class="hangtitle">详细地址</span><br>
            <input id="address" class="hanginput form-control"/>
        </div>
        <div class="hang">
            <span class="hangtitle">请输入法人姓名</span><br>
            <input id="faren" class="hanginput form-control"/>
        </div>
        <div class="hang">
            <span class="hangtitle">请输入法人电话</span><br>
            <input id="frphone" class="hanginput form-control"/>
        </div>
        <div class="hang">
            <span class="hangtitle">请输入公司人数</span><br>
            <input id="gsrenshu" class="hanginput form-control"/>
        </div>
        <div class="hang">
            <span class="hangtitle">请输入联系人电话</span><br>
            <input id="lxrphone" class="hanginput form-control"/>
        </div>
        <div class="hang">
            <span class="hangtitle">请输入密码</span><br>
            <input id="password" class="hanginput form-control" type="password"/>
        </div>
        <div class="hang">
            <span class="hangtitle">请再次输入密码</span><br>
            <input id="repassword" class="hanginput form-control" type="password"/>
        </div>
        <div class="hang">
            <span class="hangtitle">验证码</span><br>
            <input type="text" value="" placeholder="" class="input-val form-control" >
            <canvas id="canvas" width="100" height="30" style="background-color: white"></canvas>
        </div>
        <br />
        <div class="hang" style="width: 100%!important;margin-top: 1%!important;">
            <a href="login.html"><div class="hang" id="back">返回登录</div></a>
            <div class="hang" id="save">提交</div>
        </div>

    </div>
</div>
</body>
<script src="./data/area.js"></script>
<script>
    var svcHeader = Constants.path
    $(function(){
        var show_num = [];
        draw(show_num);
        $("#canvas").on('click',function(){
            draw(show_num);
        })
        $("#save").unbind('click').click(function () {
            var val = $(".input-val").val().toLowerCase();
            var num = show_num.join("");
            if(val==''){
                alert('请输入验证码！');
            }else if(val == num){
                var password = $("#password").val()
                var repassword = $("#repassword").val()
                if(password!=repassword){
                    alert("两次密码不一致！")
                }else if($("#name").val()==''){
                    alert("请输入用户名")
                }else if($("#password").val()==''){
                    alert("请输入密码")
                }else if($("#address").val()==''||$("#faren").val()==''||$("#frphone").val()==''||$("#gsrenshu").val()==''||$("#lxrphone").val()==''
                    ||$("#name").val()==''||$("#password").val()==''||$("#street option:selected").val()==''
                    ||$("#sflouyu option:selected").val()==''){
                    alert("信息不完整，请重新输入！")
                } else if ($("#sflouyu option:selected").val() == '1' && $("#louyu option:selected").val() == '') {
                    alert("请选择所属楼宇或产业园！")
                }else{
                    var obj = {
                        'address': $("#address").val(),
                        'faren': $("#faren").val(),
                        'frphone': $("#frphone").val(),
                        'gsrenshu': $("#gsrenshu").val(),
                        'lxrphone': $("#lxrphone").val(),
                        'name': $("#name").val(),
                        'password': $("#password").val(),
                        // 'qu': $("#qu option:selected").val(),
                        // 'ssshequ': $("#ssshequ").val(),
                        'qu':"姑苏区",
                        'ssshequ':"",
                        'status': '1',
                        'street': $("#street option:selected").val(),
                        'zhen': '',
                        'sflouyu':$("#sflouyu option:selected").val(),
                        'louyu':$("#louyu option:selected").val(),
                    };
                    $.ajax({
                        url:svcHeader+"pv/wjqyxxs",
                        dataType:'json',
                        type:'put',
                        contentType: 'application/json',
                        data:JSON.stringify(obj),
                        success:function (data) {
                            alert("修改成功！")
                            window.location.href="login.html";
                        }
                    })
                }
                // draw(show_num);
            }else{
                alert('验证码错误！请重新输入！');
                $(".input-val").val('');
                // draw(show_num);
            }

        })
    })
    /*$(function(){
        var show_num = [];
        draw(show_num);
        $("#canvas").on('click',function(){
            draw(show_num);
        })
        $("#save").unbind('click').click(function () {
            var password = $("#password").val()
            var repassword = $("#repassword").val()
            if(password!=repassword){
                alert("两次密码不一致！")
            }else if($("#name").val()==''){
                alert("请输入用户名")
            }else if($("#password").val()==''){
                alert("请输入密码")
            }else if($("#address").val()==''||$("#faren").val()==''||$("#frphone").val()==''||$("#gsrenshu").val()==''||$("#lxrphone").val()==''
                ||$("#name").val()==''||$("#password").val()==''||$("#street option:selected").val()==''
                ||$("#sflouyu option:selected").val()==''){
                alert("信息不完整，请重新输入！")
            } else if ($("#sflouyu option:selected").val() == '1' && $("#louyu option:selected").val() == '') {
                alert("请选择所属楼宇或产业园！")
            } else{
                var obj = {
                    'address': $("#address").val(),
                    'faren': $("#faren").val(),
                    'frphone': $("#frphone").val(),
                    'gsrenshu': $("#gsrenshu").val(),
                    'lxrphone': $("#lxrphone").val(),
                    'name': $("#name").val(),
                    'password': $("#password").val(),
                    // 'qu': $("#qu option:selected").val(),
                    // 'ssshequ': $("#ssshequ").val(),
                    'qu':"姑苏区",
                    'ssshequ':"",
                    'status': '1',
                    'street': $("#street option:selected").val(),
                    'zhen': '',
                    'sflouyu':$("#sflouyu option:selected").val(),
                    'louyu':$("#louyu option:selected").val(),
                };
                $.ajax({
                        url:svcHeader+"pv/wjqyxxs",
                        dataType:'json',
                        type:'put',
                        contentType: 'application/json',
                        data:JSON.stringify(obj),
                        success:function (data) {
                            alert("修改成功！")
                            //window.location.href="login.html";
                        }
                    })

            }else{
                alert('验证码错误！请重新输入！');
                $(".input-val").val('');
            }

        })
    })*/
    function draw(show_num) {
        var canvas_width=$('#canvas').width();
        var canvas_height=$('#canvas').height();
        var canvas = document.getElementById("canvas");//获取到canvas的对象，演员
        var context = canvas.getContext("2d");//获取到canvas画图的环境，演员表演的舞台
        canvas.width = canvas_width;
        canvas.height = canvas_height;
        var sCode = "a,b,c,d,e,f,g,h,i,j,k,m,n,p,q,r,s,t,u,v,w,x,y,z,A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
        var aCode = sCode.split(",");
        var aLength = aCode.length;//获取到数组的长度
        for (var i = 0; i < 4; i++) { //这里的for循环可以控制验证码位数（如果想显示6位数，4改成6即可）
            var j = Math.floor(Math.random() * aLength);//获取到随机的索引值
            // var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
            var deg = Math.random() - 0.5; //产生一个随机弧度
            var txt = aCode[j];//得到随机的一个内容
            show_num[i] = txt.toLowerCase();
            var x = 10 + i * 20;//文字在canvas上的x坐标
            var y = 20 + Math.random() * 8;//文字在canvas上的y坐标
            context.font = "bold 23px 微软雅黑";
            context.translate(x, y);
            context.rotate(deg);
            context.fillStyle = randomColor();
            context.fillText(txt, 0, 0);
            context.rotate(-deg);
            context.translate(-x, -y);
        }
        for (var i = 0; i <= 5; i++) { //验证码上显示线条
            context.strokeStyle = randomColor();
            context.beginPath();
            context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
            context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
            context.stroke();
        }
        for (var i = 0; i <= 30; i++) { //验证码上显示小点
            context.strokeStyle = randomColor();
            context.beginPath();
            var x = Math.random() * canvas_width;
            var y = Math.random() * canvas_height;
            context.moveTo(x, y);
            context.lineTo(x + 1, y + 1);
            context.stroke();
        }
    }
    //得到随机的颜色值
    function randomColor() {
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        return "rgb(" + r + "," + g + "," + b + ")";
    }

    loadLouyu(function () {
        var str = "<option value=''>请选择</option>";
        for (let i=0; i<area.length;i++) {
            str += "<option value='" + area[i] + "'>" + area[i] + "</option>"
        }
        $('#louyu').append(str);
        layui.form.render('select','form-test');
    })
    function controlLouyu(value) {
        if (value == '1') {
            $("#louyuui").show();
        } else {
            $("#louyuui").hide();
        }
    }

    //街道跟着楼宇显示
    function show(louyu){
        $("#street").find("option").removeAttr("selected");
        $.ajax({
            url:svcHeader+"pb/lys/findall",
            type:'get',
            data:{
                "name":louyu
            },
            success:function (data) {
                if (data.data.length > 0) {
                    $("#street").val(data.data[0].street);
                }
            }
        })
    }
</script>

</html>